<template>
	<view>
		<hjx-header></hjx-header>

		<view class="index-cate">
			<!-- 左侧滑动区域 -->
			<scroll-view class="left-menu" scroll-y="true">
				<view class="cate1" :class="index==currentIndex?'active':'' " v-for="(item, index) in leftList"
					:key="index" @tap="changeIndex(index)">
					{{item}}
				</view>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view class="right-data" scroll-y="true">
				<view class="cate2-group" v-for="(item, i) in rightList" :key="i">
					<!-- 2级类 -->
					<view class="cate2-title">/ {{item.cat_name}} /</view>
					<!-- 3级类 -->
					<view class="cate3-list">
						<navigator class="image-box" v-for="(item2,index2) in item.children" :key='index2'
						:url="'../../subpkg1/goods-list/goods-list?cid='+item2.cat_id">
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<text>{{item2.cat_name}}</text>
						</navigator>
					</view>

				</view>

			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateData: [],
				leftList: [],
				rightList: [],
				currentIndex: 0
			}
		},		
		methods: {
			async getCateData() {
				const res = await this.$Https({
					url: '/categories',
				});
				// 获取全部分类数据
				this.cateData = res.message;
				console.log(this.cateData);
				
				// 数据缓存
				try {
					// 数据缓存 同步
					uni.setStorageSync('cates', {
						time:Date.now(),
						data:this.cateData
					});
				} catch(e) {
					uni.showToast({
						tital:"数据缓存失败",
						duration:2000
					})
				}
				// 构建左侧菜单数据
				this.leftList = this.cateData.map(v => v.cat_name);
				console.log(this.leftList);
				// 构建右侧菜单数据（2级类+3级类）
				this.rightList = this.cateData[0].children;
				console.log(this.rightList);
			},
			changeIndex(index) {
				this.currentIndex = index;
				this.rightList = this.cateData[index].children;
			}
		},
		onLoad() {
			// this.getCateData()
			// 在发起请求前,先判断一下本地存储有没有旧数据
			// 没有旧数据,就发送请求
			// 有旧数据,旧数据没有过期,就使用旧数据
			const Cates = uni.getStorageSync('cates');
			if (!Cates) {
				this.getCateData();
			} else{
				if(Date.now() - Cates.time > 1000 * 10)  {
					this.getCateData();
				} else{
					console.log('使用旧数据');
					this.cateData = Cates.data;
					this.leftList = this.cateData.map(e => e.cat_name);
					this.rightList = this.cateData[0].children;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 90rpx;
	}

	.index-cate {
		height: calc(100vh - 90rpx);
		display: flex;

		.left-menu {
			flex: 2;

			.cate1 {
				height: 90rpx;
				display: flex;
				line-height: 90rpx;
				background-color: #f8f8f8;
				text-align: center;
				justify-content: center;
				border-bottom: 1rpx solid #d6d5da;

				// 左侧菜单激活的样式
				&.active {
					color: #DDAACC;
					background-color: #ffffff;
					position: relative;

					&::before {
						content: ' ';
						display: block;
						width: 3px;
						height: 100%;
						background-color: #DDAACC;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}

			}
		}

		.right-data {
			flex: 5;

			.cate2-group {
				.cate2-title {
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
				}

				.cate3-list {
					display: flex;
					flex-wrap: wrap;

					.image-box {
						width: 33.33%;
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 70%;
						}

						text {
							margin-bottom: 10rpx;
						}
					}
				}

			}
		}
	}
</style>
